<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconlogo.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="icon_logo_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>Logo字体</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
					<div class="scroller padded text-center"> 
						<div class="grid" data-col="3">
							<div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-airchina"></span></div>
					          <label class="grid-label">logo-airchina</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-aireastern"></span></div>
					          <label class="grid-label">logo-aireastern</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-airhainan"></span></div>
					          <label class="grid-label">logo-airhainan</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-airkorean"></span></div>
					          <label class="grid-label">logo-airkorean</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-airlucky"></span></div>
					          <label class="grid-label">logo-airlucky</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-airsouthern"></span></div>
					          <label class="grid-label">logo-airsouthern</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-android"></span></div>
					          <label class="grid-label">logo-android</label>
					        </div>
					        
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-ao"></span></div>
					          <label class="grid-label">logo-ao</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-apple"></span></div>
					          <label class="grid-label">logo-apple</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-baidu"></span></div>
					          <label class="grid-label">logo-baidu</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-abc"></span></div>
					          <label class="grid-label">logo-bank-abc</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-boc"></span></div>
					          <label class="grid-label">logo-bank-boc</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-bocom"></span></div>
					          <label class="grid-label">logo-bank-bocom</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-ccb"></span></div>
					          <label class="grid-label">logo-bank-ccb</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-cmb"></span></div>
					          <label class="grid-label">logo-bank-cmb</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-bank-icbc"></span></div>
					          <label class="grid-label">logo-bank-icbc</label>
					        </div>
							<!-- 国徽（图标过大，易卡） -->
					        <!-- <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinagov"></span></div>
					          <label class="grid-label">logo-chinagov</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinagovb"></span></div>
					          <label class="grid-label">logo-chinagovb</label>
					        </div> -->
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinalife"></span></div>
					          <label class="grid-label">logo-chinalife</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinamobile"></span></div>
					          <label class="grid-label">logo-chinamobile</label>
					        </div>
					        <!-- 警徽（图标过大，易卡）-->
					        <!-- <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinapolice"></span></div>
					          <label class="grid-label">logo-chinapolice</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinapoliceb"></span></div>
					          <label class="grid-label">logo-chinapoliceb</label>
					        </div> -->
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinaresource"></span></div>
					          <label class="grid-label">logo-chinaresource</label>
					        </div>
					        <!-- 环保局（图标过大，易卡） -->
					        <!-- <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinasa"></span></div>
					          <label class="grid-label">logo-chinasa</label>
					        </div>-->
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinatelecom"></span></div>
					          <label class="grid-label">logo-chinatelecom</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-chinaunicom"></span></div>
					          <label class="grid-label">logo-chinaunicom</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-communist"></span></div>
					          <label class="grid-label">logo-communist</label>
					        </div>
					        <!-- 法院（图标过大，易卡）-->
					        <!-- <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-court"></span></div>
					          <label class="grid-label">logo-court</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-courtb"></span></div>
					          <label class="grid-label">logo-courtb</label>
					        </div>-->
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-hospital"></span></div>
					          <label class="grid-label">logo-hospital</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-mechantsgroup"></span></div>
					          <label class="grid-label">logo-mechantsgroup</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-mide"></span></div>
					          <label class="grid-label">logo-mide</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-midea"></span></div>
					          <label class="grid-label">logo-midea</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-mobileand"></span></div>
					          <label class="grid-label">logo-mobileand</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-post"></span></div>
					          <label class="grid-label">logo-post</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-qq"></span></div>
					          <label class="grid-label">logo-qq</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-sdb"></span></div>
					          <label class="grid-label">logo-sdb</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-securities"></span></div>
					          <label class="grid-label">logo-securities</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-sinaweibo"></span></div>
					          <label class="grid-label">logo-sinaweibo</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-starrysky"></span></div>
					          <label class="grid-label">logo-starrysky</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-stategrid"></span></div>
					          <label class="grid-label">logo-stategrid</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-taobao"></span></div>
					          <label class="grid-label">logo-taobao</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-tax"></span></div>
					          <label class="grid-label">logo-tax</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-tencentweibo"></span></div>
					          <label class="grid-label">logo-tencentweibo</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-tobacco"></span></div>
					          <label class="grid-label">logo-tobacco</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-wechat"></span></div>
					          <label class="grid-label">logo-wechat</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconlogo-logo-windows8"></span></div>
					          <label class="grid-label">logo-windows8</label>
					        </div>
					        <div class="clearfix"></div>
						</div>
					</div>  

				</article>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		<script>
			$('.grid-cell').on(A.options.clickEvent,function(){
		    	A.alert('提示', $(this).find('.iconfont').attr('class').replace(/.* /,''));
		    	return false;
		    });
		</script>
	</body>
</html>